import apiRequest from "@/service/apiRequest";
import { View, Image } from "@tarojs/components";
import { useLoad, useRouter } from "@tarojs/taro";
import { useState } from "react";

import "./index.scss";
import Taro from "@tarojs/taro";

function PetEncyclopediaCategory() {
    const router = useRouter();
    const { categoryId, categoryName } = router.params;
    let [list, setList] = useState<any[]>([]);

    const requestList = async () => {
        let result = await apiRequest.get(`/api/pet_varieties/list/${categoryId}`);
        if (result) {
            setList(result);
        }
    }

    const handleClick = (item: any) => {
        Taro.navigateTo({
            url: `/petEncyclopedia/pages/detail/index?petVarietyId=${item.id}`
        })
    }
    useLoad(() => {
        requestList();
    })
    const renderList = list && list.length > 0 ? list.map((item: any, index) => (
        <View className="cate-c-wrap flex-c-c-c" key={index} onClick={() => handleClick(item)}>
            <Image className="cate-c-img" src={item.varietyImage} mode="aspectFill" />
            <View className="cate-c-name ellipsis">{ item.varietyName }</View>
        </View>
    )) : null
    return (
        <View className="cate-c-page">
            { renderList }
        </View>
    )

}

export default PetEncyclopediaCategory;